<template>
  <div class="text-[14px] text-[#333]">
    <div class="flex items-center">
      <div>
        <span class="mr-[4px]">长不超过</span>
        <el-input
          class="w-[135px]"
          type="number"
          v-model="maxLength"
          :min="0.01"
        >
          <template #append>cm</template>
        </el-input>
      </div>
      <div>
        <span class="mr-[4px] ml-[16px]">宽不超过</span>
        <el-input
          class="w-[135px]"
          type="number"
          v-model="maxWidth"
          :min="0.01"
        >
          <template #append>cm</template>
        </el-input>
      </div>
      <div>
        <span class="mr-[4px] ml-[16px]">高不超过</span>
        <el-input
          class="w-[135px]"
          type="number"
          v-model="maxHeight"
          :min="0.01"
        >
          <template #append>cm</template>
        </el-input>
      </div>
    </div>
    <div class="flex items-center mt-[16px]">
      <span class="mr-[4px]">自定义最大周长不超过</span>
      <el-input
        class="w-[135px]"
        type="number"
        v-model="maxPerimeter"
        :min="0.01"
      >
        <template #append>cm</template>
      </el-input>
    </div>
  </div>
</template>
<script setup>
const props = defineProps({
  value: { type: Object, default: () => ({}) },
})

const maxLength = ref()
const maxWidth = ref()
const maxHeight = ref()
const maxPerimeter = ref()

const emit = defineEmits(['input'])

watch(
  () => [maxLength.value, maxWidth.value, maxHeight.value, maxPerimeter.value],
  val => {
    const [_maxLength, _maxWidth, _maxHeight, _maxPerimeter] = val || []
    emit(
      'input',
      val
        ? {
            uni_max_length: _maxLength,
            uni_max_width: _maxWidth,
            uni_max_height: _maxHeight,
            custom_max_perimeter: _maxPerimeter,
          }
        : null
    )
  }
)

watch(
  () => props.value,
  val => {
    const {
      uni_max_length = '',
      uni_max_width = '',
      uni_max_height = '',
      custom_max_perimeter = '',
    } = val || {}
    maxLength.value = uni_max_length
    maxWidth.value = uni_max_width
    maxHeight.value = uni_max_height
    maxPerimeter.value = custom_max_perimeter
  }
)
</script>
